<template>
  <div class="rank-wechat">
      <img src="../assets/wechat.png" alt="图片加载中">
      <p v-for="(text,index) in chatTextList" :key="text + index">{{ text }}</p>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue';
export default {
  setup() {
      const state = reactive({
          chatTextList:['添加好友','进群每天赢好礼','创作者回复【作者】','投票者回复【投票】']
      })
      return {
          ...toRefs(state)
      }
  },
};
</script>

<style lang="less" scoped>
.rank-wechat {
  display: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url();
  padding: 16px 6px;
  position: absolute;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
      margin-bottom: 5px;
      border-style: none;
  }
  p {
      color: #fff;
      font-size: 12px;
      margin: 0;
      padding: 0;
  }
}
@media only screen and (min-width: 960px) {
    .rank-wechat{
        display: flex;
        left: -121px;
        top: 11px;
        img {
            width: 86px;
        }
    }
    .info-box{
        .rank-wechat{
            top: 0;
            left: -132px;
        }
    }
}
</style>